<template>
  <input type="text" v-model="keyword">
  <h3>{{keyword}}</h3>
</template>

<script>
/*
  实现一个功能，在输入框中每输入一个字符，下方展示区过0.5s后再展示这个字符（类似于防抖效果）
*/
//ref相当于精装，customRef相当于毛坯
import {ref, customRef} from 'vue'
export default {
  name: 'App',
  setup() {
    //使用vue3提供的内置ref
    // let keyword = ref('hello')

    //自定义一个ref函数
    function myRef(value, deleyMs) {
      let timer
      console.log('---myRef---', value)
      //customRef接收一个回调函数factory，包含两个参数tarck、trigger
      //该回调函数必须返回一个对象；对象中必须包含get，set两个方法
      return customRef((track, trigger)=>{
          return {
            get() {
              //有人读取myRef中的数据时，get会被调用
              console.log(`有人从myRef中读取数据了，我把${value}给他了`)
              //通知vue追踪value的变化；如果不写这行，重新解析模板时不会调用get
              track()
              return value
            },
            set(newValue) {
              //有人修改myRef中的数据时，set会被调用
              console.log(`有人把myRef中数据改成了${newValue}`)
              value = newValue
              
              //防抖，即防止每次都开一个定时器
              clearTimeout(timer)
              timer = setTimeout(()=>{
                //延迟通知vue重新解析模板
                trigger()
              }, deleyMs)
            },
          }
      })
    }

    //使用程序员自定义的ref
    let keyword = myRef('hello', 500)

    return {
      keyword,
    }
  }
}
</script>

<style>
</style>
